import React, { useEffect, useState } from "react";

function Child(props) {
  return (
    <div>
      <ul>
        {props.list.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
}

export default function App() {
  const [list, setList] = useState([]);
  const [btns, setbtns] = useState(["列表1", "列表2"]);
  const [activeIndex, setactiveIndex] = useState(0);
  let handleClick = (index) => {
    setactiveIndex(index);
  };
  useEffect(() => {
    if (activeIndex == 0) {
      setList([111, 222, 333]);
    } else {
      setList(["qqq", "www", "eee"]);
    }
  }, [activeIndex]);
  return (
    <div>
      {btns.map((item, index) => {
        return (
          <button
            key={item}
            onClick={() => {
              handleClick(index);
            }}
          >
            {item}
          </button>
        );
      })}

      <Child list={list} />
    </div>
  );
}
